<style lang="less">
  .div_truck_load_order_insurance_record {
    .dialog-form-label {
      label {
        width: 120px;
      }

    }
    .dialog-form-content {
      width: 350px
    }
  }
</style>

<template>
  <div id="div_truck_load_order_insurance_record">
    <search-bar moreDisplay>
      <el-row>
        <el-col :span="8">
          <el-form-item label="投保订单编号">
            <el-input v-model="condition['LIKE_truckLoadNumber']" placeholder="请输入投保订单编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="投保日期">
            <el-col :span="11">
              <el-radio-group v-model="radio">
                <el-radio-button label="lastweek">上周</el-radio-button>
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="quarter">本季度</el-radio-button>
              </el-radio-group>
            </el-col>
            <el-col :span="13">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="投保状态">
            <el-select v-model="condition['EQ_truckLoadOrderInsurances.insuranceStatus']" placeholder="请选择投保方式">
              <el-option
                v-for="item in $store.getters.ORDER_INSURANCE_STATUS"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="被保人名称">
            <el-input v-model="condition['LIKE_startContactName']" placeholder="请输入被投保人名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货物名称">
            <el-input v-model="condition['LIKE_cargoName']" placeholder="请输入货物名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <el-col :span="24" style="padding-bottom: 10px;border-bottom: 1px solid #d1dbe5;">
      <el-button type="primary" style="float: right" @click="reset">重置</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px" @click="search">查询</el-button>
    </el-col>
    <el-table :data="truckLoadOrders" v-loading="listLoading" highlight-current-row border style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="orderNumber" label="投保订单编号" width="130px">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
             @click="openDialog(scope.row,true)">
            {{scope.row.truckLoadNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="createdDate" label="下单日期" width="150">
      </el-table-column>
      <el-table-column prop="insureDate" width="150" label="投保日期">
      </el-table-column>
      <el-table-column prop="insureStatusName" width="100" label="投保状态">
      </el-table-column>
      <el-table-column prop="insurePrice" width="120" label="保价金额(万元)">
        <template slot-scope="scope">
          <label v-if="null!=scope.row.insurePrice">
            {{(scope.row.insurePrice / 10000).toFixed(2)}}
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="insureServicePrice" width="120" label="投保订单保费(元)">
      </el-table-column>
      <el-table-column prop="insureDegressionPrice" width="120" label="保费成本(元)">
      </el-table-column>
      <el-table-column prop="startContactName" width="120" label="被保人名称">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="startContactAddressNames" width="180" label="起始地">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="endContactAddressNames" width="180" label="目的地">
      </el-table-column>
      <el-table-column prop="cargoName" width="120" label="货物名称">
      </el-table-column>
      <el-table-column prop="statusName" width="100" label="订单状态">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="160" align="center">
        <template slot-scope="scope">
          <el-button type="primary" v-if="scope.row.insuranceStatus===101028003"
                     @click="applyForInsuranceOnLine(scope.$index,scope.row)" style="width: 120px;margin-left: 0px">
            重新投保
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <truck-load-order-select-dialog
      :truckLoadModel="truckLoadModel"></truck-load-order-select-dialog>
  </div>
</template>

<script>
import { searchTruckLoadOrderStatistics, truckLoadOrderAgainInsurance } from '../../api/truck-load/TruckLoadOrder.js';
import TruckLoadOrderSelectDialog from '../truck_load_order/TruckLoadOrderSelectDialog.vue';

export default {
  name: 'TruckLoadOrderInsuranceRecord',
  components: {TruckLoadOrderSelectDialog},
  data: function () {
    return {
      truckLoadModel: '',
      condition: {
        'LIKE_truckLoadNumber': null,
        'EQ_orderInsuranceStatus': null,
        'EQ_truckLoadOrderInsurances.insuranceStatus': null,
        'LIKE_startContactName': null,
        'LIKE_cargoName': null
      },
      radio: 'lastweek',
      daterange: [],
      listLoading: false,
      truckLoadOrders: [],
      // 线下投保确认弹框
      dialogTitle: '线下投保明细',
      dialogKey: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogForm: {
        'orderId': null,
        'orderNumber': null,
        'policyNo': null,
        'insuranceStatus': null,
        'insuranceCompanyType': null,
        'createDate': null,
        'policyEffect': null,
        'policyExpire': null,
        'total': null,
        'insuranceFee': null,
        'goodsValue': null,
        'insuranceOperateType': null
      },
      submitLoading: false,
      rules: {
        policyNo: [
          {required: true, message: '请输入保单号', trigger: 'blur'}
        ],
        createDate: [
          {type: 'date', required: true, message: '请选择投保日期', trigger: 'blur'}
        ],
        total: [
          {required: true, message: '请输入保单金额', trigger: 'blur'}
        ],
        goodsValue: [
          {required: true, message: '请输入保价金额', trigger: 'blur'}
        ]
      }
    };
  },
  watch: {
    radio (val) {
      if (val === 'lastweek') {
        this.lastWeek();
      } else if (val === 'week') {
        this.week();
      } else if (val === 'month') {
        this.month();
      } else {
        this.quarter();
      }
    }
  },
  methods: {
    openDialog (row, isDisabled) {
      this.truckLoadModel = JSON.stringify(Object.assign(row, {
        'isShow': true,
        'isDisabled': isDisabled,
        'time': Math.random()
      }));
    },
    search () {
      let filters = this.$ue.objToFilter(this.condition);
      filters += ';GTE_truckLoadOrderInsurances.createdDate=' + this.daterange[0].toJSON() +
          ';LTE_truckLoadOrderInsurances.createdDate=' + this.$ue.addDays(this.daterange[1], 1).toJSON() +
          ';IN_truckLoadOrderInsurances.insuranceStatus=101028002,101028003';
      this.loadAllOrderInsurances(filters);
    },
    reset () {
      this.$ue.resetObjNull(this.condition);
    },
    handleSizeChange (size) {
      this.size = size;
      this.search();
    },
    handleCurrentPageChange (page) {
      this.page = page;
      this.search();
    },
    loadAllOrderInsurances (filters) {
      console.log(filters);
      searchTruckLoadOrderStatistics({
        filters: filters,
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        this.truckLoadOrders = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    lastWeek () {
      this.daterange = this.$ue.getLastWeek();
    },
    week () {
      this.daterange = this.$ue.getThisWeek();
    },
    month () {
      this.daterange = this.$ue.getThisMonthNew();
    },
    quarter () {
      this.daterange = this.$ue.getThisQuarterNew();
    },

    // 申请线上投保
    applyForInsuranceOnLine (index, row) {
      this.$confirm('由于接口问题或其他原因导致自动投保失败，您需要再次申请线上投保么?', '提示', {
        type: 'info'
      }).then(() => {
        truckLoadOrderAgainInsurance(row.id).then(res => {
          if (res.status === 200) {
            this.$message.success('投保申请操作成功！');
            this.search();
          } else {
            this.$message.error('投保申请操作失败!');
          }
        });
      }).catch(() => {
        this.$message.error('数据有误，请求失败！');
      });
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.lastWeek();
    this.search();
  }
};
</script>
